<template>
	<!-- <div style="height: 90%; overflow: hidden"> -->
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					title="城市报表"
					:columns="initColumns"
					:print="printParams"
					v-model="table.columns"
					@export-file="exportExcel"
				/>
				<el-row type="flex">
					<cl-filter-group v-model="search">

						<cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
							>
								<el-option label="全部" value="" />
								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="请选择"
								filterable
								multiple
								collapse-tags
								clearable
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
						<cl-filter label="城市">
							<cl-select
								v-model="search.city_id"
								placeholder="全部"
								filterable
								multiple
								collapse-tags
								clearable
							>
								<el-option
									v-for="item in bizRefData.city"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="人员">
							<cl-select
								v-model="search.user_id"
								placeholder="全部"
								filterable
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in userList"
									:key="item.user_id"
									:label="item.user_name"
									:value="item.user_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="渠道">
							<cl-select
								v-model="search.source_id"
								placeholder="全部"
								filterable
								multiple
								collapse-tags
							>
								<el-option
									v-for="(item, index) in sourceList"
									:key="index"
									:label="item.cname"
									:value="item.id"
								/>
							</cl-select>
						</cl-filter>
						<el-button type="primary" size="small" @click="quickSelect('yesterday')">
							昨日数据
						</el-button>
						<el-button type="primary" size="small" @click="quickSelect('week')">
							本周数据
						</el-button>
						<el-button type="primary" size="small" @click="quickSelect('month')">
							本月数据
						</el-button>
					</cl-filter-group>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="table" id="cityIcor1">
				<cl-empty slot="empty" />
			</cl-table>
		</cl-pagefull>
	</cl-crud>
	<!-- </div> -->
</template>
<script>
import { exportExcel } from "@/utils/excel";
import dayjs from "dayjs";
import { uniqBy } from "@/utils";

export default {
	data() {
		return {
			printParams: {
				id: "cityIcor1",
				popTitle: "城市产出比"
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				sortRefresh: false,
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries,
					maxHeight: 500
				}
			},
			initColumns: [],
			totalRow: {},
			search: {
				biz_id: "",
				company_id: "",
				bra_id: [],
				city_id: [],
				user_id: [],
				source_id: [],
				date: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
			},
			userList: [],
			sourceList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
		this.init();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.spread)
				.set("dict", {
					api: { page: "listcityoutput" }
				})
				.done();
			app.refresh();
		},
		async onRefresh(params, { next, done, render }) {
			let { data, title, total } = await next({ ...params, ...this.search });
			let columns = uniqBy(title || [], "key").map((v, i) => {
				return {
					fixed: v.value == "城市",
					disable: i == 0,
					...v,
					name: v.value,
					prop: v.key,
					label: v.value,
					sortable: true,
					minWidth: 180
				};
			});
			this.totalRow = total;
			this.initColumns = columns;
			!this.table.columns.length && (this.table.columns = columns);
			render(data);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefCompany(biz_id);
			this.getBizRefBrand(biz_id);
			this.getBizRefCity(biz_id);
			this.initData();
		},
		async initData() {
			this.getUserList();
			this.getSourceList();
		},
		changeBiz() {
			this.search.company_id = "";
			this.search.bra_id = [];
			this.search.city_id = [];
			this.search.user_id = [];
			this.search.source_id = [];
			this.init();
			this.refresh();
		},
		// 人员列表
		async getUserList() {
			const { biz_id } = this.search;
			this.userList = [];
			if (!biz_id) return;
			const data = await this.$service.user.deptuserlists({
				biz_id,
				post: 4,
				manage_user: 1
			});
			this.userList = data;
		},
		//获取来源渠道
		async getSourceList() {
			const { biz_id } = this.search;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({
				biz_id,
				// type: 1,
				status: 1
			});
			this.sourceList = data;
		},
		// 表格合计
		getSummaries({ columns, data }) {
			return columns.map((column, index) => {
				if (index === 0) {
					return "合计";
				}
				return this.totalRow?.[column.property] ?? "";
			});
		},
		// 导出EXCEl
		exportExcel() {
			exportExcel("#cityIcor1");
		},
		quickSelect(dateType = 'yesterday') {
			switch (dateType) {
				case 'yesterday': 
					this.search.date = [dayjs().subtract(1, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'day').format('YYYY-MM-DD')]
					break
				case 'month':
					this.search.date = [dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
					break
				case 'week':
					if (dayjs().startOf('week').format('YYYY-MM-DD') == dayjs().format('YYYY-MM-DD')) {
						this.search.date = [dayjs().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD'), dayjs().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD')]
					} else {
						this.search.date = [dayjs().startOf('week').add(1, 'day').format('YYYY-MM-DD'), dayjs().endOf('week').add(1, 'day').format('YYYY-MM-DD')]
					}
					break
			}

			this.refresh()
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.el-table--scrollable-x {
		.el-table__body-wrapper {
			z-index: 2;
		}
	}
}
</style>
